<script setup lang="ts" name="B6Assign">
import { reactive, ref } from "vue";

//let car = reactive({ brand: "别墨我", price: 99 });
const car = reactive({ brand: "别墨我", price: 99 });

const game = ref({ name: "自由幻想", level: 132 });

const changeCarPrice = () => {
  car.price += 1;
};

const changeCar = () => {
  // 错误 1
  // car = { brand: "奥拓", price: 1 };
  // 错误2
  //  car = reactive({ brand: "奥拓", price: 1 });
  // 错误3
  //car = { ...{ brand: "奥拓", price: 1 } };

  Object.assign(car, { brand: "奥拓", price: 1 });
};

const incrementLevel = () => {
  game.value.level += 1;
};
const changeGame = () => {
  game.value = { name: "我的世界", level: 456 };
};
</script>

<template>
  <section class="bg-blue-50 p-3">
    <div>这台{{ car.brand }}车，价值{{ car.price }}个W。</div>
    <div class="my-3 flex justify-start items-center gap-x-2">
      <button
        class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50"
        @click="changeCarPrice"
      >
        改价
      </button>
      <button
        class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50"
        @click="changeCar"
      >
        换台车
      </button>
    </div>
  </section>
  <section class="my-3">
    <div>游戏：{{ game.name }}，等级：{{ game.level }}</div>
    <div class="flex gap-x-2">
      <button
        @click="incrementLevel"
        class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50"
      >
        升级
      </button>
      <button
        @click="changeGame"
        class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50"
      >
        换游戏
      </button>
    </div>
  </section>
</template>
